<template>
    <div>
        <ul class="list">
          <li
           v-for="(item,index) in letters"
           :key="item"
           :ref="item"
           @click="cityClick"
           @touchstart="handleTouchStart"
           @touchmove="handleTouchMove"
           @touchend="handleTouchEnd"
          >{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Aside",
        props:{
           cities:Object
        },
        data () {
          return {
            touchStatus:false,
            startY:0,
            timer:null
          }
        },
        updated () {//当页面渲染完成之后 生命周期钩子函数
           this.startY=this.$refs['A'][0].offsetTop;//A 到 顶部div的距离
        },
        computed : {
           letters () {//将数据转为数组
               const letters=[];
               for (let i in this.cities){
                  letters.push(i);
               }
               return letters;// [A,B,C,D]
           }
        },
        methods:{
            cityClick(e) {//
              // console.log(e.target.innerText)
              this.$emit("change",e.target.innerText);//向上触发事件
            },
          handleTouchStart(){
              this.touchStatus=true;
          },
          handleTouchMove(e){//手指移动   实现滑动切换的逻辑
              if(this.touchStatus){
                if(this.timer){
                  clearTimeout(this.timer)
                }
                this.timer=setTimeout(()=>{//周期性定时器  函数截留
                    const endY=e.touches[0].clientY-80;//当前触发点到 顶部div的距离
                    const index=Math.floor((endY-this.startY) /20);// 计算当前是第几个字母
                    if(index >= 0 && index < this.letters.length){
                      this.$emit("change",this.letters[index]);//向上触发事件
                      // console.log(index);
                    }
                },15)
              }
          },
          handleTouchEnd(){
             this.touchStatus=false;
          }
        }
    }
</script>
<style lang="stylus" scoped>
   .list{
      width:.2rem;
      position :absolute;
      top:.8rem;
      right:0;bottom:0;
      display:flex;
      flex-direction :column;
      justify-content :center;
      li{
        text-align :center;
        font-size :.16rem;
        line-height:.2rem;
        color:#00bcd4;
      }
   }
</style>
